<template>
  <div class="orderBox">
    <div class="orderBox-top">
      <p class="p-choose" v-if="!ticket">请选择票种</p>
      <p class="p-choose-1 flex jcs alc" v-else>
        <span class="cho-l">{{ ticket.cnName }}</span>
        <span class="cho-r">
          <span class="cho-num"> ￥ {{ ticket.showPrice }}</span>
          <span class="cho-n">x {{ total }}</span></span
        >
      </p>
      <p class="p-notice" v-if="period">
        {{ period.reservedate }}
        {{ week[period.week] }}
        {{ period.starttime.slice(-8, -3) }}
      </p>
    </div>
    <div class="orderBox-bbtom">
      <div class="ord-tol-b flex jcs">
        <p class="ord-tol">合计</p>
        <p class="ord-num">￥ {{ ticket ? total * ticket.showPrice : 0 }}</p>
      </div>
      <el-button
        v-if="step === 1"
        @click="confirm"
        class="ord-btn"
        :type="total ? 'primary' : 'info'"
        :disabled="isok"
        >{{ isokText }}</el-button
      >

      <el-button
        v-if="step === 2"
        @click="doingpay"
        class="ord-btn"
        type="primary"
        :disabled="is_step2_disabled"
        >立即支付</el-button
      >

      <el-button
        v-if="step === 2"
        @click="goback"
        class="ord-btn ml0 ord-btn-default"
        type="default"
        :disabled="is_step2_disabled"
        >上一步</el-button
      >

      <el-checkbox v-model="checked"
        ><span class="check-text">我已阅读购票、退款等须知</span></el-checkbox
      >
    </div>
    <el-dialog :visible.sync="dialogVisible">
      <div slot="title" class=" fs18 cl3 doagle">
        <span>请使用</span>
        <img
          v-if="payway.gatewayCode === 'aliwapPay'"
          class="pay-way-item-img"
          src="../../assets/ali.png"
          alt=""
        />
        <img
          v-else-if="payway.gatewayCode === 'wxAppPay'"
          class="pay-way-item-img"
          src="../../assets/6.png"
          alt=""
        />
        <span>扫码支付</span>
      </div>
        <div class="flex jcc alc">
          请在 10分钟 内完成付款
        </div>
      <div class="flex jcc alc">
        <div class="paybpx">
          <qrcode-vue :value="payUrl" :size="132" level="H" />
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取消支付</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { mapState, mapMutations } from 'vuex'
import { week } from '@/const/cardType'
import { payOrder, getPaymethods1, payAli } from '@/http/protocol'
import QrcodeVue from 'qrcode.vue'
import store from '@/store/index'

export default {
  name: 'orderBox',
  components: {
    QrcodeVue
  },
  computed: {
    ...mapState('ticketinfo', [
      'ticket',
      'reservedate',
      'period',
      'total',
      'trueInfo',
      'step',
      'payway'
    ]),
    ...mapState('user', ['loginS']),

    isok () {
      return !this.checked || !this.total || (this.trueInfo && this.trueInfo.length === 0)
    },
    isokText () {
      return this.isok ? '请选择并完善实名信息' : '确认提交'
    },
    is_step2_disabled () {
      return !this.checked
    },
    getCommand () {
      return {
        orderType: 'ticket', // 订单类型，默认ticket
        programId: this.ticket.programId, // 项目ID
        platform: 'PC', // 使用平台 APP(小程序) H5和 PC
        fetchType: '1', // 取票方式 1 电子票
        pay: this.payway,
        reservePeriodId: this.period.id, // 预约场次ID
        details: [
          {
            scheduleId: this.ticket.id, // 票种ID
            quantity: this.total, // 数量
            certificateReqs: this.trueInfo.map((item) => ({
              memberTicketInfoId: item.id, // 参观人ID
              ticketInfoId: item.relativeId, // 关联的成年参观人ID, 可为空
              extraCertType: item.extraCertType // 关联的成年参观人ID, 可为空
            }))
          }
        ]
      }
    }
  },
  data () {
    return {
      checked: false,
      week,
      payUrl: '',
      dialogVisible: false
    }
  },
  mounted () {},
  methods: {
    ...mapMutations('ticketinfo', ['setStep', 'setPayList']),
    async confirm () {
      // 确认订单并跳转到支付页面】
      console.log(this.loginS)
      if (!this.loginS) {
        store.commit('user/showlogin', true)
        return
      }

      const disable = this.trueInfo.some(item => item.needCard && !item.extraCertType)
      if (disable) {
        this.$err('请选择免费证件类型！')
        return
      }
      // const res = await getPaymethods(JSON.stringify(this.getCommand))
      const res1 = await getPaymethods1({ platform: 'PC' })
      console.log(res1)
      if (res1.success) {
        this.setPayList(res1.data)

        this.$nextTick(() => {
          this.setStep(2)
        })
      } else {
        this.$err(res1.msg)
      }
      console.log(res1)
    },
    async doingpay () {
      // 支付
      console.log(this.getCommand)
      const res = await payOrder(JSON.stringify(this.getCommand))
      if (res.success) {
        // eslint-disable-next-line no-debugger
        payAli(res.data)
        // eslint-disable-next-line no-debugger
        // if (data.qr_code) {
        //   this.payUrl = data.qr_code
        //   this.dialogVisible = true
        // }
      } else {
        this.$err(res.msg)
      }
    },
    goback () {
      // 返回上一步
      this.setStep(1)
    }
  }
}
</script>

<style scoped lang="less">
.orderBox {
  width: 384px;
  height: 298px;

  .orderBox-top {
    height: 139px;
    background: #f7f7f7;
    padding: 24px;

    .p-choose {
      font-size: 16px;
      font-weight: 500;
      color: #999999;
      line-height: 22px;
    }
    .p-notice {
      font-size: 13px;
      font-weight: 400;
      color: #999999;
      line-height: 18px;
    }
    .p-choose-1 {
      margin-bottom: 3px;

      .cho-l {
        font-size: 16px;
        font-weight: 700;
        color: #333333;
        line-height: 22px;
      }
      .cho-r {
        .cho-num {
          font-size: 16px;
          font-weight: 500;
          color: #fb6d21;
          line-height: 22px;
          margin-right: 6px;
        }
        .cho-n {
          font-size: 16px;
          font-weight: 500;
          color: #b3b3b3;
          line-height: 22px;
        }
      }
    }
  }
  .orderBox-bbtom {
    height: 159px;
    background: #fcfcfc;
    padding: 24px;
    .ord-tol-b {
      padding-bottom: 17px;
      .ord-tol {
        font-size: 16px;
        font-weight: 600;
        color: #333333;
        line-height: 22px;
      }
      .ord-num {
        font-size: 16px;
        color: #fb6d21;
        line-height: 21px;
      }
    }
    .ord-btn {
      width: 100%;
      margin-bottom: 14px;
      &.ml0 {
        margin-left: 0;
      }
    }
    .ord-btn-default {
      background: #ffffff;
      border-radius: 2px;
      border: 1px solid #f4f4f4;
      font-weight: 500;
      color: #009769;
    }
    .check-text {
      font-size: 12px;
      font-weight: 400;
      color: #808080;
      line-height: 17px;
    }
  }
  .paybpx {
    background: red;
    display: flex;
    align-items: center;
    justify-content: center;
    background: url(https://img.alicdn.com/tfs/TB1TIYpbsLJ8KJjy0FnXXcFDpXa-150-150.png)
      50% no-repeat;
    cursor: pointer;
    width: 150px;
    height: 150px;
  }
  .doagle {
    display: flex;
    align-items: center;
    img {
      width: 25px;
      margin: 0 5px;
    }
  }
}
</style>
